<template>
    <a-card :bordered="false">
      <detail-list title="基本信息">
        <detail-list-item term="订单编码">{{ordersDetails.orderNo }}</detail-list-item>
        <detail-list-item term="订单金额(总金额)">{{ordersDetails.buyPrice}}</detail-list-item>
        <detail-list-item term="优惠总金额">{{ordersDetails.discountPrice}}</detail-list-item>
<!--        <detail-list-item term="物流金额">{{ordersDetails.discountPrice}}</detail-list-item>-->
        <detail-list-item term="最终金额">{{ordersDetails.presentPrice}}</detail-list-item>
        <detail-list-item term="付款时间">{{ordersDetails.paymentTime}}</detail-list-item>
<!--        <detail-list-item term="发货时间">{{ordersDetails.deliveryTime}}</detail-list-item>-->
<!--        <detail-list-item term="收货时间">{{ordersDetails.receiverTime}}</detail-list-item>-->
        <detail-list-item term="成交时间">{{ordersDetails.closingTime}}</detail-list-item>
<!--        <detail-list-item term="是否退换货">-->
<!--          <span v-if="hasReturnExchange == 0">没有</span>-->
<!--          <span v-else-if="hasReturnExchange == 1">换货</span>-->
<!--          <span v-else-if="hasReturnExchange == 2">退货</span>-->
<!--          <span v-else-if="hasReturnExchange == 3">换货 + 退货</span>-->
<!--        </detail-list-item>-->
<!--        <detail-list-item term="订单状态">-->
<!--          <span v-if="orderStatus == 0">待付款</span>-->
<!--          <span v-else-if="orderStatus == 1">待发货</span>-->
<!--          <span v-else-if="orderStatus == 2">待收获</span>-->
<!--          <span v-else-if="orderStatus == 3">已完成</span>-->
<!--          <span v-else>已关闭</span>-->
<!--        </detail-list-item>-->
<!--        <detail-list-item term="备注">{{ordersDetails.remark}}</detail-list-item>-->
      </detail-list>
      <a-divider style="margin-bottom: 32px"/>

      <div class="title">商品信息</div>
      <a-table
        style="margin-bottom: 24px"
        :columns="ordersColumns"
        :dataSource="ordersList">
      </a-table>
      <a-button  size="large" type="danger" @click="closeTab()" style="float : right">关闭</a-button>
    </a-card>
</template>

<script>
  import PageLayout from '@/components/page/PageLayout'
  import STable from '@/components/table/'
  import DetailList from '@/components/tools/DetailList'
  import ABadge from "ant-design-vue/es/badge/Badge"
  import { getAction } from '@/api/manage'
  const DetailListItem = DetailList.Item
  export default {
    components: {
      PageLayout,
      ABadge,
      DetailList,
      DetailListItem,
      STable
    },
    data () {
      return {
        //订单状态
        orderStatus:{},
        //是否退换货
        hasReturnExchange:{},
        //订单商品详情
        ordersDetails:{},
        ordersList:[],
        ordersColumns: [
          {
            title: '商品名称',
            dataIndex: 'skuName',
            key: 'skuName'
          },
          {
            title: '付款时间',
            dataIndex: 'paymentTime',
            key: 'paymentTime'
          },
          // {
          //   title: '发货时间',
          //   dataIndex: 'deliveryTime',
          //   key: 'deliveryTime'
          // },
          // {
          //   title: '收货时间',
          //   dataIndex: 'receiverTime',
          //   key: 'receiverTime'
          // },
          {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            customRender: text => {
              if (text == 0){
                return '代发货'
              } else if (text == 1){
                return '已发货'
              } else if (text == 2){
                return '已收货'
              } else if (text == 20){
                return '换货中'
              } else if (text == 21){
                return '换货成功'
              } else if (text == 40){
                return '退货中'
              } else if (text == 41){
                return '已退货'
              }
            }
          },
          {
            title: '单价',
            dataIndex: 'buyPrice',
            key: 'buyPrice',
            align: 'right'
          },
          {
            title: '数量（件）',
            dataIndex: 'quantity',
            key: 'quantity',
            align: 'right'
          },
          {
            title: '优惠金额',
            dataIndex: 'discountTotal',
            key: 'discountTotal',
            align: 'right'
          },
          {
            title: '金额',
            dataIndex: 'buyTotal',
            key: 'buyTotal',
            align: 'right'
          },
          {
            title: '最终总金额',
            dataIndex: 'presentTotal',
            key: 'presentTotal',
            align: 'right'
          }
        ],
      }
    },
    created(){
      this.getOders(this.$route.query.record.id);
    },
    mounted(){
    },
    activated(){
      this.getOders(this.$route.query.record.id);
    },
    methods:{

      getOders(ids) {
        let toParams = {id:ids};
        this.$nextTick(function () {
          getAction("/order-api/admin/order/orderDetails",toParams )
            .then(res => {
              if (res.success) {
                this.ordersDetails = res.result[0]
                this.hasReturnExchange = res.result[0].hasReturnExchange
                this.orderStatus = res.result[0].status
                this.ordersList = this.ordersDetails.orderItems
              }
            })
            .catch(err => {
            });
        })
      },
      //关闭标签
      closeTab(){
        this.$router.back()
      },
    },
    computed: {
      // title () {
      //   return this.$route.meta.title
      // }
    },

  }
</script>

<style lang="scss" scoped>
  .title {
    color: rgba(0,0,0,.85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
</style>